<template>
  <el-tabs v-model="activeName" @tab-click="tabClick" type="border-card" class="ml30 mr30 mb30">
    <el-tab-pane :label="item.dictLabel" :name="item.dictValue" v-for="(item, index) in productApplyStatus"
                 :key="index">
      <el-table v-loading="tableLoading" :data="tableList"
                style="width: 100%">
        <el-table-column prop="productId" label="产品编号" width="180"></el-table-column>
        <el-table-column prop="productName" label="服务产品名称" width="180"></el-table-column>
        <el-table-column prop="productTypeName" label="服务类型"></el-table-column>
        <el-table-column prop="companyName" label="服务商" width="150"></el-table-column>
        <el-table-column prop="upperPrice" label="服务产品价格(元)" width="150">
          <template slot-scope="scope">
           {{ $priceFormat(scope.row.limitOriginalPrice,scope.row.upperOriginalPrice) }}
          </template>
        </el-table-column>
        <el-table-column prop="quotaPrice" label="拟补贴金额(元)" width="150">
          <template slot-scope="scope">
            {{ $priceFormat(scope.row.limitDiscount,scope.row.upperDiscount) }}
          </template>
        </el-table-column>
        <el-table-column prop="transNum" label="成交笔数">
          <template slot-scope="scope">
            {{ scope.row.transNum || 0}}
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.auditStatus == -1" class="color-red">未提交</span>
            <span v-if="scope.row.auditStatus == 0" class="color-warning">待审核</span>
            <span v-if="scope.row.auditStatus == 1" class="color-success">审核通过</span>
            <div v-else-if="scope.row.auditStatus == 2" class="status-wrapper">
              <span class="color-red">退回修改</span>
              <el-tooltip :content="scope.row.comment" placement="top">
                <p class="feedback-text">{{ scope.row.comment }}</p>
              </el-tooltip>
            </div>
            <span v-if="scope.row.auditStatus == 3" class="color-red">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column label="产品状态">
          <template slot-scope="scope">
            <span v-if="scope.row.listStatus == 0" class="color-warning">未上架</span>
            <span v-if="scope.row.listStatus == 1" class="color-success">已上架</span>
            <span v-if="scope.row.listStatus == 2" class="color-red">下架</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
              <el-button v-if="scope.row.auditStatus != -1" type="text" @click="btnClick(scope.row, scope.$index, 'view')">查看</el-button>
              <el-button v-if="scope.row.auditStatus == -1 || scope.row.listStatus == 2 || scope.row.auditStatus == 2" type="text" class="ml10" @click="btnClick(scope.row, scope.$index, 'edit')">
                编辑
              </el-button>
              <el-button v-if="(scope.row.listStatus == 0 && scope.row.auditStatus == 1) || (scope.row.listStatus == 2 && scope.row.auditStatus == 1)" type="text" class="ml10" @click="btnClick(scope.row, scope.$index, 'ground')">
                上架
              </el-button>
              <el-button v-if="scope.row.listStatus == 1" type="text" class="ml10"
                         @click="btnClick(scope.row,scope.$index, 'ground')">下架
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination class="pagination_box" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageData.currentPage"
                       :page-sizes="[100, 200, 300, 400, 500]"
                       :page-size="pageData.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       hide-on-single-page
                       :total="pageData.totalPage">
        </el-pagination>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
// 服务产品
import {getProductOwnPage, productGround} from "@/api/homeApi";
export default {
  data() {
    return {
      tableLoading: false,
      listData: [],
      activeName: 'all',
      productApplyStatus: [
        {"dictLabel": "全部","dictValue": "all"},
        {"dictLabel": "待审核","dictValue": "0"},
        {"dictLabel": "审核通过","dictValue": "1"},
        {"dictLabel": "退回修改","dictValue": "2"},
        {"dictLabel": "审核不通过","dictValue": "3"},
        {"dictLabel": "已上架","dictValue": "4"},
        {"dictLabel": "已下架","dictValue": "5"}
        ],
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0
      },
      tableList:[]
    }
  },
  computed: {
    commonDict() {
      return this.$store.state.common.commonDict
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    tabClick(val) {
      if(val.name === 'all') {
        this.getTableList()
      } else if(val.name === '0'){
        this.getTableList(0)
      } else if(val.name === '1'){
        this.getTableList(1)
      } else if(val.name === '2'){
        this.getTableList(2)
      } else if(val.name === '3'){
        this.getTableList(3)
      } else if(val.name === '4'){
        this.getTableList('', 1)
      } else if(val.name === '5'){
        this.getTableList('', 2)
      }
    },
    handleSizeChange(val) {
      this.$set(this.pageData, 'pageSize', val)
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.$set(this.pageData, 'currentPage', val)
      this.getTableList()
    },
    getTableList(auditStatus='',listStatus='') {
      this.tableLoading = true
      getProductOwnPage({
        pageNo: this.pageData.currentPage,
        pageNum: this.pageData.pageSize,
        auditStatus,
        listStatus
      }).then(res => {
        if (res.code === 200) {
          this.tableList = [...res.rows] 
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    btnClick(row, index, type) {
      let self = this
      switch (type) {
        case 'view':
          self.$router.push(`serviceProductPreview?id=${row.productId}&status=${row.listStatus}`)
          break;
        case 'ground':
          let listStatus = 0
          self.tableLoading = true
          if (row.listStatus == 0 || row.listStatus == 2) {
            // 未上架、下架进行上架操作
           listStatus = 1
          } else if (row.listStatus == 1) {
            // 上架进行下架操作
            listStatus = 2
          }
          productGround({
            listStatus,
            productId: row.productId
          }).then(res => {
            if (res.code === 200) {
              self.$message.success(listStatus === 1 ? '上架成功!': '下架成功!')
              self.getTableList()
            }else{
              self.$message.error(res.msg)
            }
          }).finally(() => {
            self.tableLoading = false
          })
          break;
        case 'edit':
          self.$router.push(`serviceProductList?id=${row.productId}&from=2`)
          break;
        default:
          break;
      }
    }
  },
}
</script>
<style scoped lang="scss">
@import "@/assets/css/element-variables";

:deep(.el-tabs__item) {
  min-width: 120px;
  text-align: center;
}

:deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: #F7F8F9;
}

:deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  color: $text-color-grey;
}

.status-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feedback-text {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
</style>
